<template>
    <el-container style="height: 100vh; border: 1px solid #f7f7f7">
        <el-aside width="256px">
            <el-menu background-color="transparent">
                <el-menu-item index="1">
                    <template slot="title">
                        <i class="el-icon-question"></i>
                        <span>问题管理</span>
                    </template>
                </el-menu-item>
                <el-menu-item index="2">
                    <template slot="title">
                        <i class="el-icon-s-order"></i>
                        <span>工单管理</span>
                    </template>
                </el-menu-item>
                <el-menu-item index="3">
                    <template slot="title">
                        <i class="el-icon-files"></i>
                        <span>知识库管理</span>
                    </template>
                </el-menu-item>
                <el-submenu index="4">
                    <template slot="title">
                        <i class="el-icon-wallet"></i>
                        <span>绩效管理</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item index="4-1">绩效考核</el-menu-item>
                        <el-menu-item index="4-2">年度总结</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                <el-submenu index="5">
                    <template slot="title">
                        <i class="el-icon-notebook-2"></i>
                        <span>信息管理</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item index="5-1">惠民政策</el-menu-item>
                        <el-menu-item index="5-2">通知公告</el-menu-item>
                        <el-menu-item index="5-3">农产品行情</el-menu-item>
                        <el-menu-item index="5-4">特派员风采</el-menu-item>
                        <el-menu-item index="5-5">种养殖技术</el-menu-item>
                        <el-menu-item index="5-6">成果转化</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                <el-submenu index="6">
                    <template slot="title">
                        <i class="el-icon-user"></i>
                        <span>用户管理</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item index="6-1">身份认证</el-menu-item>
                        <el-menu-item index="6-2">角色管理</el-menu-item>
                        <el-menu-item index="6-3">部门管理</el-menu-item>
                        <el-menu-item index="6-4">特派员信息</el-menu-item>
                        <el-menu-item index="6-5">用户信息</el-menu-item>
                        <el-menu-item index="6-6">管理人员</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                <el-submenu index="7">
                    <template slot="title">
                        <i class="el-icon-collection-tag"></i>
                        <span>标签管理</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item index="7-1">用户标签</el-menu-item>
                        <el-menu-item index="7-2">问题分类标签</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                <el-submenu index="8">
                    <template slot="title">
                        <i class="el-icon-setting"></i>
                        <span>系统管理</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item index="8-1">菜单管理</el-menu-item>
                        <el-menu-item index="8-2">数据字典</el-menu-item>
                        <el-menu-item index="8-3">操作日志</el-menu-item>
                        <el-menu-item index="8-4">系统日志</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
            </el-menu>

        </el-aside>

        <el-container>
            <el-header style="text-align: right; font-size: 12px; border-bottom: 1px solid black; font-family: 黑体;">
                <el-row class="flex-center">
                    <el-col :span="2">
                        <el-dropdown>
                            <span class="el-dropdown-link">
                                <i class="el-icon-menu el-icon--left"></i>管理后台
                                <i class="el-icon-arrow-down el-icon--right"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item icon="el-icon-plus"></el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </el-col>
                    <el-col :span="16"></el-col>
                    <el-col :span="2" :offset="2">
                        <el-button icon="el-icon-edit-outline" circle></el-button>
                        <el-button icon="el-icon-bell" circle></el-button>
                    </el-col>
                    <!-- <el-col :span="1"></el-col> -->
                    <el-col :span="1">
                        <el-avatar shape="circle" :src="iconPath" style="margin: 0;"></el-avatar>
                    </el-col>
                    <el-col :span="3">
                        <el-dropdown trigger="click">
                            <span class="el-dropdown-link">
                                占位试试长id1111111<i class="el-icon-arrow-down el-icon--right"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item icon="el-icon-plus">黄金糕</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </el-col>
                </el-row>
            </el-header>

            <el-main style="padding: 24px; background-color: #f7f7f7;">
                <el-button @click="test">
                    <i>transparent</i>
                </el-button>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
import { test } from 'shelljs';

export default {
    data() {
        return {
            activeMenu: '/home',
            iconPath: null,
        };
    },
    methods: {

    },
}
</script>

<style>
.flex-center {
    display: flex;
    align-items: center;/* 垂直居中 */
    /* justify-content: center; */
    /* 如果需要水平居中，也可以加上这一行 */
    height: 100%;
}

</style>